<template>
  <!-- 自定义导航栏 -->
  <!-- <CustomNavBar title="找队伍,快来寻找你感兴趣的队伍" /> -->
  <up-search
    v-model="value"
    placeholder="请输入搜索关键词"
    @search="onSearch"
    @custom="onSearch"
  ></up-search>

  <up-tabs
    :list="list1"
    v-model:active="active"
    @click="onTabChange"
    class="custom-tabs"
  ></up-tabs>
  <TeamCardList :team-list="teamList" />
</template>

<script setup>
import { ref, onMounted } from 'vue'
import myAxios from '@/plugins/myAxios' // uni-app兼容的自定义axios
import CustomNavBar from '@/components/CustomNavBar.vue'
import TeamCardList from '@/components/TeamCardList.vue'
import { onPullDownRefresh, onShow } from '@dcloudio/uni-app'
const teamList = ref([])
const searchText = ref('')
const active = ref('public')
const value = ref('')
const list1 = ref([
  {
    name: '公开',
    title: 'public'
  },
  {
    name: '加密',
    title: 'secret'
  }
])

/**
 * 加载队伍信息
 * @param val
 * @param state
 * @returns {Promise<void>}
 */
const listTeam = async (val = '', state = 0) => {
  try {
    const res = await myAxios.get('/team/list/my/join', {
      searchText: val,
      teamState: state
    })
    if (res && res.data) {
      teamList.value = res.data
    } else {
      uni.showToast({
        title: '加载队伍失败',
        type: 'error'
      })
    }
  } catch (error) {
    uni.showToast({
      title: '加载队伍失败',
      type: 'error'
    })
  }
}

/**
 * 队伍状态查询切换
 * @param name
 */
const onTabChange = name => {
  console.log(name)
  if (name.title === 'public') {
    active.value = 'public'
    listTeam(searchText.value, 0)
  } else {
    active.value = 'secret'
    listTeam(searchText.value, 2)
  }
}

/**
 * 进入页面时进行渲染
 */
onShow(async () => {
  await listTeam()
})

/**
 * 页面渲染时加载队伍
 */
onMounted(async () => {
  listTeam()
})

/**
 * 关键词搜索队伍（队伍名+队伍描述）
 */
const onSearch = val => {
  listTeam(val)
}

const onRefresh = () => {
  setTimeout(() => {
    loading.value = false
    onTabChange(active.value)
  }, 1000)
}
onPullDownRefresh(() => {
  // console.log("下来了")
  // setTimeout(() => {
  // 	loading.value = false;
  // 	onTabChange(active.value);
  // 	uni.stopPullDownRefresh(); // 停止下拉刷新动画
  // }, 1000);
})
</script>

<style scoped>
.iconBox {
  position: fixed;
  /* 固定定位 */
  bottom: 20px;
  /* 距离页面底部 */
  right: 20px;
  /* 距离页面右侧 */
  z-index: 999;
  /* 确保在最上层 */
  width: 60px;
  /* 宽度 */
  height: 60px;
  /* 高度 */
  display: flex;
  /* 使用 flex 布局 */
  justify-content: center;
  /* 水平居中 */
  align-items: center;
  /* 垂直居中 */
  background-color: #49a1ff;
  /* 背景色 */
  border-radius: 50%;
  /* 圆形按钮 */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  /* 阴影效果 */
  border: 1px solid #e5e5e5;
  /* 边框 */
}

.iconBox:active {
  transform: scale(0.95);
  /* 点击时缩小效果 */
  transition: transform 0.1s ease-in-out;
}
</style>
